<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Cart | DarkWhite</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
	<link href="css/item_hover.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="fonts/stylesheet.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/cart.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
  
        <header id="main_header">
       
             
            </header><!--/header-->



    <section id="content" class="shortcode-item">
        <div class="container">
           
            <div id="all">
                <div id="content">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-12">
                        <!-- breadcrumb-->
                        <nav aria-label="breadcrumb">
                          <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                            <li aria-current="page" class="breadcrumb-item active">购物车</li>
                          </ol>
                        </nav>
                      </div>
                      <div id="basket" class="col-lg-12">
                        <div class="box">
                          <form method="post" action="checkout1.html">
                            <h1>购物车</h1>
                            <div class="table-responsive">
                              <table class="table">
                                <thead>
                                  <tr>
                                    <th><input type="checkbox" name="checkAll" id="checkAll" onclick="SetAll(this)">全选</th>
                                    <th colspan="2">商品名称</th>
                                    <th>教师</th>
                                    <th>原价</th>
                                    <th colspan="2">实际价格</th>
                                  </tr>
                                </thead>
                                <tbody id="cartlesson">
                                 
                                </tbody>
                                <tfoot id="carttotal">
                                  
                                </tfoot>
                              </table>
                            </div>
                            <!-- /.table-responsive-->
                            <div class="box-footer d-flex justify-content-between flex-column flex-lg-row">
                              <div class="left"><a href="lang.html" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> 继续购物</a></div>
                              <div class="right">
                                  
                                <button type="button" class="btn btn-outline-secondary"> <i class="fa fa-refresh"></i><a  style="color: black;" href="cart.html">刷新购物车</a> </button>
                                <button type="button" class="btn btn-outline-secondary" style="color: white;  background-color: red;"> <a style="color: white;" href="404.html"> 结算</a>   <i class="fa fa-chevron-right"></i> </button>
                          
                              </div>
                            </div>
                          </form>
                        </div>
                        <!-- /.box-->
                      </div>
                      
                      </div>
                      <!-- /.col-md-3 -->
                    </div>
                  </div>
                </div>
              </div>
             




        </div><!--/.container-->
    </section><!--/#content-->
    

    <section id="bottom">
      <div id="bottom2" class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         
      </div>
  </section>
  
  <footer id="footer" class="midnight-blue">
      <div class="container">
          <div class="row">
              <div class="col-sm-6">
                  &copy; 2019 All Rights Reserved.
              </div>
              <div class="col-sm-6">
                  <ul class="pull-right">
                      <li><a href="index.html">首页</a></li>
                      <li><a href="about-us.html">关于我们</a></li>
                      <li><a href="404.html">常见问题</a></li>
                      <li><a href="contact-us.html">联系我们</a></li>
                  </ul>
              </div>
          </div>
      </div>
  </footer>
  
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/wow.min.js"></script>
    <script>
       let lis
       let Adata
      $(window).load(function(){
        $.ajax({
        method:'GET',
        url:'http://127.0.0.1:5050/user/sessiondata',
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        success:function(data)
        {
            
            uname=data.uname;
            isLogin=data.isLogin;
            if(isLogin)
            {
              $.ajax({
             method:'GET',
             url:'http://127.0.0.1:5050/cart',
             data:`uname=${uname}`,
              success:function(data){
                Adata=data
              let htmlcart = ''
             let total = 0
             lis=data.length
             console.log('异步请求成功')
             for(let i = 0;i<data.length;i++){
              htmlcart +=`
              <tr id="${i}" value="${i+1}">
                <td><input type="checkbox" name="choose" id="" onclick="checkOne()"></td>
                <td><a href="#"><img style="height:50px; width:50px;" src="${data[i].img}" alt=""></a></td>
                <td>${data[i].lname}${data[i].lname}${data[i].lname}${data[i].lname}</td>
                <td><a href="#">${data[i].tname }</a></td>
                <td>￥${data[i].price}</td>
                <td>￥${data[i].price}</td>
                <td><a id="del_${data[i].cid}" class="glyphicon glyphicon-trash" onclick="del(this)"></a></td>
              </tr>
                `
              total +=data[i].price
            }
            $('#cartlesson').html(htmlcart)
            let htmltotal = ''
            htmltotal +=`
            <tr>
              <th colspan="5">Total</th>
              <th colspan="2">￥${total}</th>
            </tr>
              `
            $('#carttotal').html(htmltotal)
          }
        })
      
      
            }
          },
        error: function(xhr, err){
            console.log('异步session失败：')
            console.log(xhr)
            console.log(err)
          }
          
        })
      })
        
    





      del=function(obj)
      {
        var parentTr=obj.parentNode.parentNode;
        var parentTable = parentTr.parentNode;
        var id =$(obj).attr('id');
        
  
        let iid=id.split('_')[1];
        $.ajax({
          method:"GET",
          url:"http://127.0.0.1:5050/cart/item/delete",
          data:`iid=${iid}`,
          success:function(data)
          {

          }



        })

        parentTable.removeChild(parentTr);
      }
     
    
  
      function SetAll(obj){
        var selectAll = document.getElementsByName("checkAll");
        var item = document.getElementsByName("choose");
        for(var i=0;i<item.length;i++){
          item[i].checked=obj.checked;
        }
      }
      function checkOne(){
        var selectAll = document.getElementsByName("checkAll");
        var item = document.getElementsByName("choose");
        var num=0;
			//遍历子选项中选中的个数，如果全选中，就将全选的状态设置为true，有一个未选中全选的状态就为false
			for (var i=0;i<item.length;i++) {
			if(!item[i].checked)
			{
				selectAll.checked=false;
				break;
			}		
			else
			{
				selectAll.checked=true;
			}
		}
    }




/***/





    </script>
    </body>
  </html>